﻿@{
    ViewBag.Title = "StreetAndFamilyTree";
}

<h2>Báo cáo theo tuyến đường và loại cây</h2>
<script type="text/javascript">

    function init(data) {
        $("#map").empty();

        map = new OpenLayers.Map("map");
        var mapnik = new OpenLayers.Layer.OSM();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position = new OpenLayers.LonLat(108.202622, 16.051794).transform(fromProjection, toProjection);
        var zoom = 13;

        map.addLayer(mapnik);

        if (data) {
            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);
            var x = 0.00001, y = 0.00001;

            $.each(data, function (i, item) {                
                var position1 = new OpenLayers.LonLat(item.PointY, item.PointX).transform(fromProjection, toProjection);
                markers.addMarker(new OpenLayers.Marker(position1));                
            });

        }
        map.setCenter(position, zoom);
    }


    $(document).ready(function () {
        init();

        $("#btnSearch").click(function () {
            var duong = $("#streets").val();
            var loaicay = $("#familyTrees").val();
            $.getJSON("Search", { street: duong, familyTree: loaicay })
              .done(function (data) {
                  //load lai ban do
                  init(data);
              })
              .fail(function (jqxhr, textStatus, error) {
                  var err = textStatus + ", " + error;
                  console.log("Request Failed: " + err);
              });
        });
    });
</script>

<div class="post" style="margin-bottom: 20px; padding: 10px">
    Loại cây: @Html.DropDownList("familyTrees", "Tất cả")
    Đường: @Html.DropDownList("streets", "Tất cả")
    <input type="button" id="btnSearch" class="button" value="Tìm kếm" />
</div>
<div class="post">
    <a name="TemplateInfo"></a>
    <div id="map" style="width: 100%; height: 500px; padding: 10px">
    </div>
</div>
